/**
 * Created by tanbingqin on 2020/11/9.
 */
import React from "react";
import { messages } from "share/common";
import { Row, Col, Icon } from "antd";
import "styles/components/template/sub-form/sub-form.scss";
import Condition from "components/condition";
const If = Condition.If;
import customField from "share/customField";
import subFormUtil from "components/template/sub-form/sub-form-util";

class SubFormShow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false, //默认收起
      rowList: [],
    };
  }

  componentDidMount() {
    this.initRowList();
  }

  initRowList = () => {
    const { field } = this.props;
    this.setState({ rowList: subFormUtil.processRowList(field) });
  };

  toggleShowContent = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  render() {
    const { field, info, onlyChildren } = this.props;
    const { isOpen, rowList } = this.state;
    return (
      <div className="sub-form-show">
        <If value={!onlyChildren}>
          <Row type="flex" align="middle" className="title-row margin-bottom-12">
            <span className="font">{field.fieldName}</span>
            <span className="icon-btn" onClick={this.toggleShowContent}>
              <If value={isOpen}>
                {messages("common.fold") /*收起*/}&nbsp;
                <Icon type="up" />
              </If>
              <If value={!isOpen}>
                {messages("request-1.key853") /*展开*/}&nbsp;
                <Icon type="down" />
              </If>
            </span>
          </Row>
        </If>

        <If value={onlyChildren}>
          <Row type="flex" align="middle" className="title-row margin-bottom-12" style={{ background: "#F7F8FA" }}>
            <Col span={16}>
              <span className="font-2">{field.fieldName}</span>
            </Col>
            <Col span={8} style={{ textAlign: "right" }}>
              <span className="icon-btn-2" onClick={this.toggleShowContent}>
                <If value={isOpen}>
                  {messages("common.fold") /*收起*/}&nbsp;
                  <Icon type="up" />
                </If>
                <If value={!isOpen}>
                  {messages("request-1.key853") /*展开*/}&nbsp;
                  <Icon type="down" />
                </If>
              </span>
            </Col>
          </Row>
        </If>

        {rowList.map((row, rowIndex) => {
          let fields = customField.renderFields(row, info, undefined, "sub-form", undefined, true);
          return (
            <div className="margin-bottom-32">
              <Row type="flex" align="middle" className="sub-title-row margin-bottom-12">
                {field.fieldName}（{("0" + (rowIndex + 1)).substr(-2)}）
              </Row>
              <If value={isOpen}>
                <If value={!onlyChildren}>
                  {customField.renderFields(row, info, undefined, "sub-form", undefined, false)}
                </If>
                <If value={onlyChildren}>
                  {fields &&
                    fields.map((field) => {
                      return (
                        <div className="slide-document-fields-box">
                          <div className="slide-document-fields-item">
                            {field.name}
                            {field.name && " : "}
                            <span className="slide-document-fields-item-value">{field.content}</span>
                          </div>
                        </div>
                      );
                    })}
                </If>
              </If>
            </div>
          );
        })}
      </div>
    );
  }
}

SubFormShow.propTypes = {
  field: React.PropTypes.object,
  info: React.PropTypes.object,
  onlyChildren: React.PropTypes.bool, //customField渲染模式
};

SubFormShow.defaultProps = {
  field: {},
  info: {},
  onlyChildren: false,
};

export default SubFormShow;
